;
(function() {
  // @mouseenter="addbgcolor($event, index0)"
  // @mouseleave="removebgcolor"
  Vue.component('treerbacs', {
    template: `<div>
    <li v-for="(item0, index0) in model" class="userframework-tree-list">
      <div
        :class="{ 'tree-padding-1': item0.level == 1 , 'tree-padding-2': item0.level == 2 , 'tree-padding-3': item0.level == 3 , 'tree-padding-4': item0.level == 4 , 'tree-padding-5': item0.level == 5 , 'tree-padding-6': item0.level == 6 , 'tree-padding-7': item0.level == 7 , 'tree-padding-8': item0.level == 8  }"
        class="userframework-title clearfix cursor"
        ref="c1"
        @click.stop.prevent="toggle(index0, item0, $event)"
        @mouseenter="addbgcolor($event, item0)"
        @mouseleave="hidehandle($event, item0)"
        :data-id="item0.id"
        :data-parentId="item0.parentId"
        :data-type="item0.type"
        :data-index="index0">
        <div class="pull-left z-50 relative">

          <div v-if="showEdit != item0.id" class="ellipsis-1" style="width:125px" :title="item0.shortName">
            <span class="staff" v-if="item0.orgType == 'DD' && item0.orgMemberType == 'STAFF' && item0.level == '2' ">员工</span>
            <span class="usercustomer" v-if="item0.orgType == 'DD' && item0.orgMemberType == 'CUSTOMER' && item0.level == '2' ">客户</span>
            <span :class="{'icon-GMopen': showList.indexOf(item0.id) > -1 , 'icon-Gm-prefix': showList.indexOf(item0.id) == -1  }"></span>
            {{item0.shortName}}
          </div>
          <div class="editArea" v-if="showEdit == item0.id">
            <input  type="text"  class=""  v-model="item0.shortName" style="width:120px" />
            <span class="icon-Gm-confirm icon-color mr-5"  @click.stop.prevent="addEditPro(item0)"></span>
            <span class="icon-Gm-cancel icon-color"  @click.stop.prevent="noEditPro(item0)"></span>
          </div>
        </div>

        <div class="userhandle-key" style="display:none;position: absolute;right: -10px;z-index: 90000;top:0" >
          <span class="icon-Org-account icon-color cursor mr-5 add-menu hoverBut" v-if="showEdit != item0.id" v-show="permissions.indexOf('c180') > -1">
            <ul>
              <li @click.stop="addChild(index0, item0, $event,'same')">新建同级组织</li>
              <li @click.stop="addnext(index0, item0, $event,'next')">新建下级组织</li>
              <div class="arrowicon1"><img src="assets/images/range_arrow.png" alt=""></div>
            </ul>
          </span>
          <span class="icon-Gm-delete icon-color cursor mr-5 hoverBut" @click.stop.prevent="delOrganization(item0)" v-if="showEdit != item0.id " v-show="permissions.indexOf('c182') > -1"></span>
          <span class="icon-Gm-edit icon-color cursor hoverBut" @click.stop.prevent="editOrganization(item0)" v-if="showEdit != item0.id "  v-show="permissions.indexOf('c181') > -1"></span>
        </div>

        <div class="border-b tissue-border"></div>

      </div>

      <ul v-if="showList.indexOf(item0.id) > -1">
        <div class="editArea" v-if="showInput == item0.id && inputType == 'same'">
          <input  type="text"  class=""  v-model="newshortName"/>
          <span class="icon-Gm-confirm icon-color mr-5"  @click.stop.prevent="addSetPro(item0)"></span>
          <span class="icon-Gm-cancel icon-color"  @click.stop.prevent="noSetPro(item0)"></span>
          <div class="border-b tissue-border"></div>
        </div>
        <div class="editArea" v-if="showInput == item0.id && inputType == 'next'"  style="margin-left:10px">
          <input  type="text"  class=""  v-model="newshortName1"/>
          <span class="icon-Gm-confirm icon-color mr-5"  @click.stop.prevent="addSetPro(item0)"></span>
          <span class="icon-Gm-cancel icon-color"  @click.stop.prevent="noSetPro(item0)"></span>
          <div class="border-b tissue-border"></div>
        </div>

        <treerbacs
          class="item"
          :key="index0"
          @change="getPidData"
          @gettype="getmenberType"
          ref="c1"
          :model="item0.children">
        </treerbacs>
      </ul>
    </li>

    </div>`,
    props: {
      model: [Object, Array],
      num: [String]
    },
    data: function() {
      return {
        open: false,
        index: 0,
        data: [],
        status: '',
        kid: null,
        showInput: '',
        newshortName: '',
        newshortName1: '',
        editshortName: '',
        showEdit: '',
        inputType: '',
        showList: [],
        permissions: JSON.parse(window.localStorage.getItem('permissions')),
      }
    },
    methods: {
      //删除当前组织
      delOrganization(data) {
        $('.userslideTop').css('display', 'none')
        userLists.clearItem('organization', data);
      },
      //新建同级组织
      //取消创建
      noSetPro(data) {
        this.showInput = '',
          this.newshortName = ''
      },
      //确定创建
      addSetPro(data) {
        var that = this
        if (this.newshortName && this.inputType == 'same') {
          hlhttp.post({
            url: 'position',
            data: {
              pid: data.parentId,
              short_name: this.newshortName
            },
            success: (res) => {
              that.showInput = ''
              that.newshortName = ''
              that.getPidData(data.parentId)
            }
          })
        }
        if (this.newshortName1 && this.inputType == 'next') {
          hlhttp.post({
            url: 'position',
            data: {
              pid: data.id,
              short_name: this.newshortName1
            },
            success: (res) => {
              that.showInput = '',
              that.newshortName1 = ''
              that.getPidData(data.id)
            }
          })
        }
      },
      //同级
      addChild(i, data, e, type) {
        if (this.showList.indexOf(data.id) != -1) {
          this.showList.splice(this.showList.indexOf(data.id), 1)
        }
        this.inputType = type
        this.showInput = data.id;
        this.toggle(i, data, e, type, 'child');
      },
      //显示编辑区域
      editOrganization(data) {
        this.showEdit = data.id
      },
      // 下级
      addnext(i, data, e, type) {
        this.inputType = type
        if (this.showList.indexOf(data.id) != -1) {
          this.showList.splice(this.showList.indexOf(data.id), 1)
        }
        this.showInput = data.id
        this.toggle(i, data, e, type, 'child');
      },

      // 更改名称
      addEditPro(data) {
        var that = this
        hlhttp.put({
          url: 'organization',
          data: {
            organization_id: data.id,
            short_name: data.shortName,
            pid: data.parentId,
            full_name: '#',
            logo: '#',
            province_id: '#',
            province_name: '#',
            city_id: '#',
            city_name: '#',
            district_id: '#',
            district_name: '#',
            address: '#',
            memo: '#',
            email: '#',
            bl: '#',
            finance_bank: '#',
            finance_card: '#',
            finance_name: '#',
            tel: '#',
          },
          success: (res) => {
            that.showEdit = '',
            that.editshortName = ''
            that.getPidData(data.parentId)
          }
        })

      },
      noEditPro(data) {
        this.showEdit = '',
          this.editshortName = ''
        this.getPidData(data.parentId)
      },

      //点击展开并且调用下级菜单
      toggle(i, data, e, t, s) {
        this.getmenberType(data.id, data.parentId, data.adminOrgId, data.memberOrgId)

        if (this.showList.indexOf(data.id) == -1) {
          this.showList.push(data.id)
        } else {
          this.showList.splice(this.showList.indexOf(data.id), 1)
        }
        this.getPidData(data.id)
      },

      getmenberType(id, parentId, adminOrgId, memberOrgId) {
        this.$emit('gettype', id, parentId, adminOrgId, memberOrgId)
      },

      getPidData(id, type, localId) {
        if (type && localId) {
          this.$emit('change', id, type, localId)
          return
        }
        this.$emit('change', id)
      },

      //背景色
      addbgcolor(e, data) {
        if (data.orgType == "WX" || data.orgType == "DD") {
          if (data.id) {
            e.srcElement.children[1].style.display = 'block'
          }
        }
      },
      //隐藏
      hidehandle(e, data) {
        if (data.oflag || !data.id || data.orgType == 'DD') return
        e.srcElement.children[1].style.display = 'none'
      },


    },
    mounted() {
      
    }
  })
}())
